<!--  -->
<template>
  <div class="form-info-list" v-loading="loading">
    <TipTotal v-if="formData && formData.form" :title="'提交数据列表（'+formData.form.name+'）'">
      <template slot="total">
        <p class="totalR" v-if="total">数据量（<span
          class="green">{{currentSite && currentSite.language && currentSite.language.name}}</span>）：{{total}}</p>
      </template>
      <div class="notice"><i class="el-icon-info" style="color:#E6A23C; margin-left:-5px; margin-right:10px;"></i>说明：前台用户提交表单数据！</div>
    </TipTotal>
    <div v-if="formData && formData.form">
      <div class="operate-form-list dffr">
        <el-form :inline="true" :model="search" class="demo-form-inline">
          <el-form-item label="系统" prop="systemName">
            <el-select size="medium" v-model="search.systemName" style="width: 180px;" placeholder="请选择">
              <el-option label="全部" :value="''"></el-option>
              <el-option v-for="(item, index) in systemNameList" :key="index" :label="item" :value="item"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="标题" prop="systemItemName">
            <el-select size="medium" filterable v-model="search.systemItemName" style="width: 180px;" placeholder="请选择">
              <el-option label="全部" :value="''"></el-option>
              <el-option v-for="(item, index) in systemItemNameList" :key="index" :label="item" :value="item"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="提交时间">
            <el-date-picker v-model="search.createAt" type="daterange" size="small" range-separator="至"
              start-placeholder="开始时间" end-placeholder="结束时间">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="排序">
            <el-select size="small" v-model="search.orderBy" style="width: 80px;" placeholder="请选择">
              <el-option :label="'顺序'" :value="'ASC'"></el-option>
              <el-option :label="'倒序'" :value="'DESC'"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item style="margin-left:12px;">
            <el-button type="primary" @click="onSubmit" size="small">查询</el-button>
            <el-button type="success" @click="onReset" size="small">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <!-- 列表数据 -->
    <div v-loading="tLoading">
      <DataTable ref="formInfoDataTable" :formData="formData" :data="data" :custom="custom" :resetData="resetData" />
    </div>
    <div style="float: right;margin: 12px 0 24px;">
      <PageTurning :page="page" :changePage="changePage" />
    </div>
    <div style="clear:both;"></div>
  </div>
</template>

<script>
import TipColla from '@/components/common/TipColla.vue'
import TipTotal from '@/components/common/TipTotal.vue'
import PageTurning from '@/components/common/PageTurning.vue'
import DataTable from '@/components/main/user/form/sysinfolist/DataTable.vue'
import { mapGetters } from 'vuex'
var _ = require('lodash')
export default {
  created () {
    // 获取 sForm 变大数据
    this.loading = true
    this.$post('/form/get-form-data', { formId: this.$route.query.fid }).then(response => {
      if (response && response.form && response.form.id) {
        this.formData = response
      } else {
        this.formData = null
      }
      this.loading = false
      // 获取表单数据
      if (this.formData && this.formData.listFormComponent && this.formData.listFormComponent.length > 0) {
        for (let i = 0; i < this.formData.listFormComponent.length; i++) {
          let item = this.formData.listFormComponent[i]
          if (this.custom.length >= 2) {
            break
          }
          if (parseInt(item.componentForm.typeId) === 21) {
            continue
          }
          this.custom.push(item.componentForm)
        }
      } else {
        this.custom = []
      }

      this.resetData()
    })
    // 获取系统表单提交数据的系统内容名称列表
    this.$post('/form/system-form-system-name-list', { formId: this.$route.query.fid }).then(response => {
      if (response && response.length > 0) {
        this.systemNameList = response
      }
    })
  },
  data () {
    return {
      loading: true,
      tLoading: true,
      formData: null,
      data: [],
      // 系统内容名称列表
      systemNameList: [],
      // 系统名称列表
      systemItemNameList: [],
      page: {
        // 当前页
        page: 1,
        // 一页大小
        size: 12,
        // 总数
        total: 0
      },
      search: {
        orderBy: 'DESC',
        systemItemName: '',
        systemName: '',
        createAt: []
      },
      // 自定义显示的数据列名称
      custom: [],
      total: 0
    }
  },
  computed: {
    ...mapGetters([
      'currentSite'
    ])
  },
  watch: {
    'search.systemName': {
      handler (newValue) {
        if (newValue !== '') {
          // 获取系统表单提交数据的系统内容名称列表
          this.$post('/form/system-form-system-item-name-list', { formId: this.$route.query.fid, systemName: newValue }).then(response => {
            if (response && response.length > 0) {
              this.systemItemNameList = response
            }
          })
        } else {
          this.systemItemNameList = []
          this.search.systemItemName = ''
        }
      },
      deep: true
    }
  },
  components: {
    TipColla,
    TipTotal,
    PageTurning,
    DataTable
  },
  methods: {
    // 提交查询
    onSubmit () {
      this.resetData()
    },
    // 重置
    onReset () {
      this.search = {
        orderBy: 'DESC',
        createAt: []
      }
      this.page.page = 1
      this.resetData()
    },
    // 修改数据总数
    dataTotal (total) {
      this.total = '' + total
    },
    // 改变页面
    changePage (page) {
      this.page = _.cloneDeep(page)
      this.resetData()
    },
    // 刷新数据
    resetData () {
      if (!this.formData || !this.formData.form || !this.formData.form.id) {
        return
      }
      let param = Object.assign({ formId: this.formData.form.id }, this.search, this.page)
      this.tLoading = true
      this.$jpost('/form/system-info-list', param).then(response => {
        if (response && response.total && response.list) {
          this.dataTotal(response.total)
          this.page.page = response.pageNum
          this.page.total = response.total
          this.data = response.list
        } else {
          this.dataTotal(0)
          this.page.page = 1
          this.page.total = 0
          this.data = []
        }
        this.tLoading = false
      })
    }
  }
}

</script>

<style scoped>
.totalR {
  float:right;
  margin-right:8px;
  margin-top:6px;
  font-size: 14px;
  color:#666;
}
.operate-form-list /deep/ .el-date-editor .el-range-separator{width: 30px;}
</style>
